<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>Title</title>
</head>
<body>
<span id ="sp"><font color="red">静夜思</font></span>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
姓名： <input type="text" name="username" value="张三" /><br>
<button type="button" id="show1">显示</button>
<button type="button" id="hide1">隐藏</button>
<button type="button" id="delete">删除</button>
< a href="http://www.baidu.com">跳转到百度</ a>
<script type="text/javascript">
    $(function () {
    //alert("这是jquery的hello word ！")
    // 通过id获取元素
    //  alert($("#sp").text());
    //  标签元素选择器
    //  alert($("span").text());

    //    隐藏所有p标签的元素
    // $("p").hide();

    // //  当鼠标单击button按钮的时候触发这个方法
    //   $("#show1").click(function () {
    //         显示所有p标签的元素
    //       $("p").show();
    //   });

    //    当鼠标单击hide1这个元素的时候触发这个方法
    //     $("hide1").click(function () {
    //        隐藏p标签
    //         $("p").hide();
    //     });
    // 获取表单的元素的value值
    // alert($("[name='username']").val());
    //
    // 获取P标签中的文本内容
    // alert($("p").text());
    //
    // 获取P标签中的html整个元素
    // $("#sp").html("<fount color='#7fff00'>中国</fount>");
    //
    // 更改a标签中的href属性内容
    // $("a").attr("herf","http://www.jd.com");
    // $("a").text("跳转到京东");
    //
    //
    //  姓名输入框的内容改变事件
    //
    // $("[name = 'username']").change(function (){
    //     alert("输入的内容改变了");
    // });

    // //显示
    // $("#show1").click(function () {
    //     $("p").fadeIn("slow");
    //
    // });
    // 隐藏
    // $("#hide1").click(function(){
    // // 淡出， 慢慢的隐藏
    //    $("p").fadeOut("slow");
    // });

